let html = document.querySelector("#html");
let style = document.querySelector('#style');
let string2 = ''
let string = `
/*你好，我叫龚建安
 * 接下来我要演示一下前端基本功
 * 首先我要准备一个div
**/ 
#div1{
    border: 1px solid black;
    width: 200px;
    height: 200px;
}
/* 接下来把 div 变成一个八卦图
 * 先画一个圆
**/
#div1{
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
    border: none;
}
/* 八卦是阴阳形成的
 * 一黑一白
**/
#div1{
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%,
    rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
}
/* 加两个混元球 */
#div1::before{
    width: 100px;
    height: 100px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,1) 0%,
    rgba(255,255,255,1) 25%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 100%);
}
#div1::after{
    width: 100px;
    height: 100px;
    bottom:0;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 25%,
    rgba(255,255,255,1) 25%, rgba(255,255,255,1) 100%);
    
}
`;

console.log(string.length);
let n = 0;

// 用setTimeout实现有延时的递归，以实现文字出现动画效果
let step = () => {
    setTimeout(() => {
        // 如果有回车则直接加换行符
        // 如果没有回车则直接加字符
        if (string[n] === '\n') {
            string2 += '<br>'
        } else if (string[n] === ' ') {
            string2 += '&nbsp;'
        } else {
            string2 += string[n]
        }
        html.innerHTML = string2;
        style.innerHTML = string.substring(0, n);
        window.scrollTo(0, 9999999) // 滚动到页面最下方
        html.scrollTo(0, 999999)
        if (n + 1 < string.length) {
            n = n + 1;
            step();
        }
    }, 25);
};
step();


